﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Portal/Master/Portal.Master" AutoEventWireup="true"
    CodeBehind="Product.aspx.cs" Inherits="Besture.UI.Portal.Hotel.Product" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="../../Resource/css/product.css" />
    <link rel="stylesheet" href="../../Resource/css/pager.css" />
    <script type="text/javascript" src="../../Resource/js/jquery.pager.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Kk3pzIO14j5D70xIQF30DDwS"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
    <div class="main container">
        <!--当前位置 -->
        <div class="current_position">
            <a href="../Home/Index.aspx">首页</a> > 酒店列表
        </div>
        <!--选择条件-->
        <div class="condition_part">
            <div class="bar">
                <div>
                    酒店名称：<input type="text" id="hn" value="<%=hotelName %>" />
                </div>
                <div>
                    地区：<input type="text" value="上海" readonly="readonly" />
                </div>
                <div>
                    入住：<input type="text" class="date_input" id="bt" value="<%=beginTime %>" />
                </div>
                <div>
                    退房：<input type="text" class="date_input" id="et" value="<%=endTime %>" />
                </div>
                <a href="javascript:QueryHotels(1);" class="search_btn">搜&nbsp;&nbsp;索</a>
                <br class="clear" />
            </div>
            <div class="list">
                <ul>
                    <li>位置</li>
                    <li class="on" tag="0">不限</li>
                </ul>
                <ul>
                    <li>价格</li>
                    <li class="on" bp="0" ep="0">不限</li>
                </ul>
                <ul>
                    <li>星级</li>
                    <li class="on" tag="0">不限</li>
                </ul>
                <ul>
                    <li>特色</li>
                    <li class="on" tag="0">不限</li>
                </ul>
                <ul class="brandul">
                    <li>品牌</li>
                    <li class="on" tag="0">不限</li>
                </ul>
                <ul class="lastul">
                    <li>设施</li>
                    <li class="on" tag="0">不限</li>
                </ul>
            </div>
        </div>
        <div class="product_part">
            <div class="layout_main fleft">
                <!--排序-->
                <div class="sortbar">
                    最受欢迎<a href="#" ot="1" od="0" class="active">评分<img src="../../Resource/images/sortico.png" /></a>
                    <a href="#" ot="2" od="1">价格<img src="../../Resource/images/sortico.png" /></a>
                    <a href="#" ot="3" od="0">星级<img src="../../Resource/images/sortico.png" /></a>
                    <span><font></font>酒店 </span>
                </div>
                <!--酒店列表-->
                <div class="hotel_list">
                </div>
                <!-- 分页 -->
                <div id="pager" style="display: block;padding-left: 150px;">
                </div>
            </div>
            <div class="layout_side fright">
                <!--地图-->
                <div id="map">
                </div>
                <!--酒店推荐-->
                <div class="hotel_rec">
                    <dl>
                        <dt>酒店推荐</dt>
                    </dl>
                </div>
            </div>
            <br class="clear" />
        </div>
        <!--地图弹窗-->
        <div class="mask">
        </div>
        <div class="popmapwrap">
            <div id="popmap" style="float: left; width: 780px;">
            </div>
            <div id="poplist" style="float: right; width: 214px; text-align: center;">
                <div style="background-color: White">
                    <input id="rdbtn1" type="radio" value="1" name="rdGroup" checked="checked" />公交
                    <input id="rdbtn2" type="radio" value="2" name="rdGroup" />驾车
                    <input id="rdbtn3" type="radio" value="3" name="rdGroup" />步行
                </div>
                <input id="txtMapStart" type="text" placeholder="出发地" style="height: 25px; width: 210px; margin-top: 5px;" />
                <input id="txtMapEnd" type="text" placeholder="目的地" style="height: 25px; width: 210px; margin-top: 5px;" />
                <input id="mapSearch" type="button" value="搜索" style="width: 60px; height: 22px; margin-top: 5px;  margin-left: 132px"/>
                <div id="mapResult" style=" height:325px; margin-top:5px; background-color:White; overflow-y:scroll;"></div>
            </div>
        </div>
    </div>
    <script type="text/x-mustache" id="t1">
        {{#items}}
            <li tag="{{ID}}">{{CategoryName}}</li>
        {{/items}}
    </script>
    <script type="text/x-mustache" id="t2">
        {{#items}}
            <li bp="{{BeginPrice}}" ep="{{EndPrice}}">{{CategoryName}}</li>
        {{/items}}
    </script>
    <script type="text/x-mustache" id="t3">
        {{#items}}
            <li><input type="checkbox" tag="{{ID}}" />{{CategoryName}}</li>
        {{/items}}
    </script>
    <script type="text/x-mustache" id="t4">
        {{#items}}
            <dd>
                <a href="javascript:Redirect({{ID}});" class="fleft">
                    <img style="width:109px; height:76px;" src="{{HotelsImage}}" />
                </a>
                <div class="info fright">
                    <div>
                        <a href="javascript:Redirect({{ID}});" class="fleft">{{HotelsName}}</a><span class="fright"><b>{{Score}}</b>/5分</span>
                        <br class="clear" />
                    </div>
                    <p>
                        地址：{{Address}}
                    </p>
                    <a href="javascript:CollectHotels({{ID}});" tag="{{ID}}" style="background:url(../../Resource/images/{{IsFav}}) left center no-repeat">收藏</a>
                </div>
                <br class="clear" />
            </dd>
        {{/items}}
    </script>
    <script type="text/javascript">
        var pc = 0; var pn = 1;var map;
        $(document).ready(function () {
            $(".date_input").date_input();
            $.ajax({
                type: "POST",
                url: "Product.aspx/GetHotelsRecommend",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d != "") {
                        var dataObj = eval("(" + msg.d + ")");
                        $(".hotel_rec > dl").eq(0).append(Mustache.render($("#t4").html(), dataObj));
                    }
                }
            });

            $.ajax({
                type: "POST",
                url: "Product.aspx/GetHotelsCategory",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d != "") {
                        var dataObj = eval("(" + msg.d + ")");
                        $(".list > ul").eq(0).append(Mustache.render($("#t1").html(), dataObj[0]));
                        $(".list > ul").eq(1).append(Mustache.render($("#t2").html(), dataObj[1]));
                        $(".list > ul").eq(2).append(Mustache.render($("#t1").html(), dataObj[2]));
                        $(".list > ul").eq(3).append(Mustache.render($("#t1").html(), dataObj[3]));
                        $(".list > ul").eq(4).append(Mustache.render($("#t1").html(), dataObj[4]));
                        for (var i = 0; i < dataObj.length - 6; i++) {
                            var s = "";
                            if (i == 0) {
                                s += "<ul class='subul' style='display:block;'>";
                            } else {
                                s += "<ul class='subul'>";
                            }
                            for (var j = 0; j < dataObj[5 + i].items.length; j++) {
                                s += "<li><input type='checkbox' tag='" + dataObj[5 + i].items[j].ID + "' />" + dataObj[5 + i].items[j].CategoryName + "</li>";
                            }
                            s += "</ul>";
                            $(".list > ul").eq(4 + i).after(s);
                        }
                        $(".list > ul").eq(dataObj.length - 1).append(Mustache.render($("#t3").html(), dataObj[dataObj.length - 1]));
                        $(".list > ul:eq(4) > li:eq(2)").addClass("active");
                    }
                    //选择条件
                    $(".condition_part ul:not(.brandul,.subul,.lastul)").each(function () {
                        var li = $("li:not(:first)", this);
                        li.click(function () {
                            if ($(this).hasClass("on")) {
                                $(this).removeClass("on");
                                li.first().addClass("on");
                            }
                            else {
                                $(this).addClass("on").siblings().removeClass("on");
                            }
                            QueryHotels(1);
                        });
                    });
                    //品牌
                    $(".condition_part .brandul li").each(function (i) {
                        if (i > 2) {
                            $(this).addClass("bactive");
                        }
                        $(this).click(function () {
                            if (i < 2) return;
                            $(this).addClass("active").removeClass("bactive").siblings(":not(.on)").removeClass("active").addClass("bactive");
                            $(".subul").hide().eq(i - 2).show();
                            QueryHotels(1);
                        });
                    });
                    //酒店选择-多选
                    $(".condition_part .subul li").click(function () {
                        if ($(this).hasClass("on")) {
                            $(this).removeClass("on").children("input").removeAttr("checked");
                            var flag = false;
                            $(".condition_part .subul li").each(function () {
                                if ($(this).hasClass("on")) flag = true;
                            });
                            if (!flag) {
                                $(".condition_part .brandul li").eq(1).addClass("on");
                            }
                        }
                        else {

                            $(this).addClass("on").children("input").attr("checked", true);
                            $(".condition_part .brandul li").eq(1).removeClass("on");
                        }
                        QueryHotels(1);
                    });
                    //设施选择-多选
                    $(".condition_part .lastul li").each(function (i) {
                        $(this).click(function () {
                            if (i < 2) return;
                            if ($(this).hasClass("on")) {
                                $(this).removeClass("on").children("input").removeAttr("checked");
                                var flag = false;
                                $(".condition_part .lastul li").each(function () {
                                    if ($(this).hasClass("on")) flag = true;
                                });
                                if (!flag) {
                                    $(".condition_part .lastul li").eq(1).addClass("on");
                                }
                            }
                            else {
                                $(this).addClass("on").children("input").attr("checked", true);
                                $(".condition_part .lastul li").eq(1).removeClass("on");
                            }
                            QueryHotels(1);
                        });
                    });
                    //最受欢迎-排序
                    $(".sortbar a").each(function (i) {
                        $(this).click(function () {
                            $(this).addClass("active").siblings().removeClass("active");
                            QueryHotels(1);
                        });
                    });

                    //查询
                    QueryHotels(1);
                }
            });
        });

        function QueryHotels(pi) {
            var hn = $("#hn").val().replace(/\'/g, "").replace(/\"/g, "");
            var bt = $("#bt").val();
            var et = $("#et").val();
            var dq = $(".list > ul:eq(0) > li[class='on']").attr("tag");
            var bp = $(".list > ul:eq(1) > li[class='on']").attr("bp");
            var ep = $(".list > ul:eq(1) > li[class='on']").attr("ep");
            var xj = $(".list > ul:eq(2) > li[class='on']").attr("tag");
            var ts = $(".list > ul:eq(3) > li[class='on']").attr("tag");
            var pp = "";
            if ($(".brandul > li:eq(1)").hasClass("on")) {
                pp = 0;
            } else {
                var hs = $(".subul > li >input[type=checkbox]:checked").each(function () {
                    pp += $(this).attr("tag") + ",";
                });
            }
            var ss = "";
            if ($(".lastul > li:eq(1)").hasClass("on")) {
                ss = 0;
            } else {
                var hs = $(".lastul > li >input[type=checkbox]:checked").each(function () {
                    ss += $(this).attr("tag") + ",";
                });
            }
            var ot = $(".sortbar a[class='active']").attr("ot");
            var od = $(".sortbar a[class='active']").attr("od");

            var d1 = new Date(bt.replace(/\-/g, "\/"));
            var d2 = new Date(et.replace(/\-/g, "\/"));
            var dayspan = (d2 - d1) / 24 / 3600 / 1000;
            if (d1 >= d2) {
                alert("结束时间必须大于开始时间！");
                return;
            }
            if (dayspan > 20) {
                alert("时间跨度不能超过20天！");
                return;
            }

            $.ajax({
                type: "POST",
                url: "Product.aspx/GetHotels",
                data: "{ 'filter': '" + hn + '_' + bt + '_' + et + '_' + dq + '_' + bp + '_' + ep + '_' + xj + '_' + ts + '_' + pp + '_' + ss + '_' + ot + '_' + od + "','pageindex':" + pi + "}",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d != "") {
                        pc = msg.d.split(",")[0];
                        $("font").html(msg.d.split(",")[1]);
                        $(".hotel_list").html(msg.d.split(",")[2]);
                        if (pc > 0) {
                            $("#pager").css("display", "block");
                            $("#pager").pager({ pagenumber: pn, pagecount: pc, buttonClickCallback: PageClick });
                        } else {
                            $("#pager").css("display", "none");
                        }
                    }

                    //表格
                    $(".item table").each(function () {
                        var showCount = 2; //只展开2行,可自行修改
                        var len = showCount * 2;
                        if ($("tr", this).length > len) {
                            //标题、信息、详细信息
                            $("tr", this).each(function (i) {
                                if (i > len) {
                                    $(this).hide();
                                }
                            });
                        }
                        //隔行换色
                        $("tr:even", this).css("background-color", "#f7f7f7").not(":first").children("td").addClass("tdborder").end().hide();
                        $("tr:odd", this).each(function () {
                            $(this).children("td").last().addClass("tdborder").end().first().addClass("tdborder").click(function () {
                                $(this).parent().next().show();
                            });
                        });
                    });
                    //收起详细信息
                    $(".slideup").click(function () {
                        $(this).parents("tr").hide();
                        return false;
                    });
                    //展开所有房型
                    $(".show_all a").click(function () {
                        $(this).parents(".item").css("margin-bottom", "15px").find("tr:odd").show();
                        $(this).parent().hide();
                        return false;
                    });

                    ShowMainMap();
                }
            });
        }

        function PageClick(pageclickednumber) {
            pn = pageclickednumber;
            QueryHotels(pn);
            $("#pager").pager({ pagenumber: pn, pagecount: pc, buttonClickCallback: PageClick });
        }

        function CollectHotels(id) {
            var fav = 0;
            if ($("a[tag='" + id + "']").css("background").indexOf("fav2") == -1) {
                fav = 1;
            }
            $.ajax({
                type: "POST",
                url: "Product.aspx/CollectHotels",
                data: "{ 'hotelid': " + id + ",'fav':" + fav + "}",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d == 1) {
                        if ($("a[tag='" + id + "']").css("background").indexOf("fav2") == -1) {
                            $("a[tag='" + id + "']").css("background", "url(../../Resource/images/fav2.png) left center no-repeat");
                        } else {
                            $("a[tag='" + id + "']").css("background", "url(../../Resource/images/fav.png) left center no-repeat");
                        }
                    } else if (msg.d == 0) {
                        alert("请先登录！");
                        window.location.href = "../UserCenter/Login.aspx";
                    } else {
                        alert("收藏失败！");
                    }
                }
            });
        }

        function Redirect(id) {
            window.location.href = "../Hotel/ProductDetail.aspx?hotelid=" + id + "&bt=" + $('#bt').val() + "&et=" + $('#et').val();
        }

        function ShowMainMap() {
            var addr = "";
            var hname = "";
            var maptemp = new BMap.Map("map");
            var myGeo = new BMap.Geocoder();
            for (var i = 0; i < $(".hotel_price").length; i++) {
                addr = $(".hotel_price:eq(" + i + ") div:eq(1) a:eq(0)").attr("addr");
                hname = $(".hotel_price:eq(" + i + ") div:eq(1) a:eq(0)").attr("hn");
                myGeo.getPoint(addr, function (point) {
                    if (point) {
                        maptemp.centerAndZoom(point, 16);
                        maptemp.enableScrollWheelZoom();
                        var marker = new BMap.Marker(point);
                        maptemp.addOverlay(marker);
                    }
                }, "上海市");
            }
        }

        function ShowMap(s) {
            $(".mask").height($(document).height()).show();
            $(".popmapwrap").show();
            map = new BMap.Map("popmap");
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint(s, function (point) {
                if (point) {
                    $("#txtMapEnd").val(s)
                    map.centerAndZoom(point, 16);
                    map.enableScrollWheelZoom();
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                }
            }, "上海市");
        }

        //关闭弹窗
        $(".mask").click(function () {
            $(".popmapwrap").hide();
            $(this).hide();
        });

        $("#mapSearch").click(function () {
            if ($("#txtMapStart").val() != "" && $("#txtMapEnd").val() != "") {
                var n = $("input[name='rdGroup']:checked").val();
                if (n == 1) {
                    var transit = new BMap.TransitRoute(map, {
                        renderOptions: { map: map, panel: "mapResult" }
                    });
                    transit.search($("#txtMapStart").val(), $("#txtMapEnd").val());
                } else if (n == 2) {
                    var driving = new BMap.DrivingRoute(map, {
                        renderOptions: { map: map, panel: "mapResult", autoViewport: true}
                    });
                    driving.search($("#txtMapStart").val(), $("#txtMapEnd").val());
                } else {
                    var walking = new BMap.WalkingRoute(map, {
                        renderOptions: { map: map, panel: "mapResult", autoViewport: true } 
                    });
                    walking.search($("#txtMapStart").val(), $("#txtMapEnd").val());
                }
            } else {
                alert("请输入出发地和目的地！");
            }
        });
    </script>
</asp:Content>
